<template>
    <div class="layout">
        <div class="layout-menu">
            <div class="logo"><img src="@/assets/logo.png" alt=""></div>
            <div class="menu-item" :class="{'active': menuActive == 'project'}" @click="menuActive = 'project'" title="项目详情"><i class="el-icon-s-order"></i></div>
            <div class="menu-item" :class="{'active': menuActive == 'api'}" @click="menuActive = 'api'" title="接口列表"><i class="el-icon-s-unfold"></i></div>
            <div class="menu-item" :class="{'active': menuActive == 'doc'}" @click="menuActive = 'doc'" title="文档列表"><i class="el-icon-document"></i></div>
        </div>
        <div class="layout-content">
            <div class="layout-content-shadow"></div>
            <div class="layout-content-menu-shadow"></div>
            <div class="layout-content-box">
                <div class="layout-content-item" :style="{'left' :  menuActive == 'project' ? '0px' : '100%'}">
                    <project></project>
                </div>
                <div class="layout-content-item" :style="{'left' :  menuActive == 'api' ? '0px' : '100%'}">
                    <api></api>
                </div>
                <div class="layout-content-item" :style="{'left' :  menuActive == 'doc' ? '0px' : '100%'}">
                    <doc></doc>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex';
import project from './project/index'
import api from './api/index';
import doc from './doc/index';
export default {
    components: {
        project,
        api,
        doc
    },
    computed: {
        ...mapState("mainOptions", {
            project: state => state.project,
            service: state => state.service
        }),
        ...mapState("user", {
            userData: state => state.userData,
        }),
    },
    data() {
        return {
            menuActive: 'doc',
        }
    },
    mounted() {
        const customTitlebar = require('custom-electron-titlebar');
        var titlebar = new customTitlebar.Titlebar({
            backgroundColor: customTitlebar.Color.fromHex('#fff'),
            enableMnemonics: false,
        });
        titlebar.titlebar.style.width = 'auto';
        titlebar.titlebar.style.color = '#666';
        titlebar.titlebar.style.left = '70px';
        titlebar.titlebar.style.zIndex = '40';
        titlebar.title.style.flex = '1 1 auto';
        titlebar.title.style.paddingLeft = '10px';

        if (!this.service.title) {
            titlebar.updateTitle(`${this.project.title}`);
        } else {
            titlebar.updateTitle(`${this.service.title} - ${this.project.title}`);
        };

        titlebar.menubarContainer.style.display = 'none';
        this.$store.dispatch('mainOptions/setTitleBar', titlebar);
    },
}
</script>